<template>
    <div class="dashboard-editor-container" >
        <!-- <panel-group @handleSetLineChartData="handleSetLineChartData"/> -->

        <!--    <el-row style="background:#fff;padding:16px 0px 0;margin-bottom:32px;">-->
        <!--      <line-chart :chart-data="lineChartData" />-->
        <!--    </el-row>-->

        <!--      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">-->
        <!--          <dynamic-chart/>-->
        <!--      </el-row>-->

        <!--      <el-row style="background:#fff;margin-bottom:32px;width:50vw;">-->
        <!--          <ocean-chart/>-->
        <!--      </el-row>-->
        <el-row :gutter="16" style="display: -webkit-box;">
            <el-col :xs="24" :sm="24" :lg="16"  :style="{'--myTheme': theme}">
                <div class="chart-wrapper">
                    <div class="icon-list">
                        <div class="item" :xs="12" :sm="12" :lg="2" v-for="b in billTypeList" @click="goToAddForm(b.formUrl,b.billType)">
                            <svg-icon :icon-class="b.icon" v-if="!util.isEmpty(b.icon)"/>
                            <svg-icon icon-class="form" v-if="util.isEmpty(b.icon)"/>
                            <span>{{b.billName}}</span>
                        </div>
                    </div>
                </div>
            </el-col>

            <el-col :xs="24" :sm="24" :lg="8">
                <div class="chart-wrapper" style="height: calc(100% - 16px)">
                    <el-table :border="Global.tableShowBorder" :data="noticeList">
                        <el-table-column label="公告标题" align="left" prop="noticeTitle" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <el-button @click="viewNotice(scope.row)" type="text" size="small">{{ scope.row.noticeTitle }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column label="公告类型" align="center" prop="noticeType" width="100">
                            <template slot-scope="scope">
                                <dict-tag :options="dict.type.sys_notice_type" :value="scope.row.noticeType"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="发布时间" align="center" prop="createTime" width="100">
                            <template slot-scope="scope">
                                <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>

        <!-- <el-row :gutter="16">
            <el-col :xs="24" :sm="24" :lg="8">
                <div class="chart-wrapper">
                    <raddar-chart/>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8">
                <div class="chart-wrapper">
                    <pie-chart/>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8">
                <div class="chart-wrapper">
                    <bar-chart/>
                </div>
            </el-col>
        </el-row> -->

        <el-dialog title="通知公告" :visible.sync="showNotice" width="1200px" append-to-body>
            <ViewNotice :noticeId="noticeId" v-if="showNotice"></ViewNotice>
        </el-dialog>
    </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import OceanChart from './dashboard/OceanChart'
import DynamicChart from './dashboard/DynamicChart'
import {listNotice} from "@/api/system/notice";
import ViewNotice from "@/views/dashboard/viewNotice"
import {queryLastUpdateList} from "@/api/home/home"
import {listBillTypeAll} from "@/api/common/billType"
const lineChartData = {
    newVisitis: {
        expectedData: [100, 120, 161, 134, 105, 160, 165],
        actualData: [120, 82, 91, 154, 162, 140, 145]
    },
    messages: {
        expectedData: [200, 192, 120, 144, 160, 130, 140],
        actualData: [180, 160, 151, 106, 145, 150, 130]
    },
    purchases: {
        expectedData: [80, 100, 121, 104, 105, 90, 100],
        actualData: [120, 90, 100, 138, 142, 130, 130]
    },
    shoppings: {
        expectedData: [130, 140, 141, 142, 145, 150, 160],
        actualData: [120, 82, 91, 154, 162, 140, 130]
    }
}

export default {
    name: 'Index',
    dicts: ['sys_notice_status', 'sys_notice_type'],
    components: {
        PanelGroup,
        LineChart,
        RaddarChart,
        PieChart,
        BarChart,
        OceanChart,
        DynamicChart,
        ViewNotice
    },
    data() {
        return {
            lineChartData: lineChartData.newVisitis,
            noticeList:[],
            showNotice:false,
            noticeId:null,
            showBuildMsg:false,
            lastUpdateList:[],
            planUpdateList:[],
            billTypeList:[]
        }
    },
    created() {
        //获取最新升级
        //this.getLastUpdateList();
        //获取所有但据类型
        this.getListTypeList();
        this.openBuildDialog();
    },
    computed: {
        theme() {
            console.log("主题：");
            return this.$store.state.settings.theme;
        }
    },
    mounted() {
        this.getNoticeList();
    },
    methods: {
        //获取最新升级
        getLastUpdateList(){
            queryLastUpdateList().then(res=>{
                let arr = res.data;
                let updatedList = [];
                let planList = [];
                arr.forEach(i=>{
                    if(i.type=='0'){
                        planList.push(i);
                    }else{
                        updatedList.push(i)
                    }
                })

                this.lastUpdateList = updatedList;
                this.planUpdateList = planList;
            })
        },
        openBuildDialog(){
            this.showBuildMsg = true;
        },
        getListTypeList(){
            let query = {
                status:'0',
                homepageShow:'1',
                orderByColumn: "sort",
                isAsc: "ascending"
            }
            listBillTypeAll(query).then(res=>{
                this.billTypeList = res.data;
            })
        },
        getNoticeList(){
            let queryParams = {
                pageNum: 1,
                pageSize: 8,
                orderByColumn:"createTime",
                isAsc:"descending",
                status:'0'
            }
            listNotice(queryParams).then(response => {
                this.noticeList = response.rows;
                this.total = response.total;
            });
        },
        handleSetLineChartData(type) {
            console.log(this.theme)
            this.lineChartData = lineChartData[type]
        },
        viewNotice(row){
            this.noticeId = row.noticeId;
            this.showNotice = true;
        },
        //制单
        goToAddForm(url,billType){
            debugger
            if(billType == 'custom_form'){
                this.$modal.msgError("请前往自定义申请页面进行申请。");
            }else{
                if(url && billType && url!='/'){
                    this.$router.push({path: url+"/add/"+billType})
                }else{
                    this.$modal.msgError("单据类型配置不正确，请前往【单据类型配置】页面进行配置，或者联系系统管理员。");
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
    padding: 16px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
        background: #fff;
        padding: 16px;
        margin-bottom: 16px;
    }
}

@media (max-width: 1024px) {
    .chart-wrapper {
        padding: 8px;
    }
}
.icon-list{
    overflow: visible;
    list-style: none;
    padding: 0!important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .item {
        display: flex;
        flex-direction: column;
        padding: 30px;
        border: 1px solid #eaeefb;
        text-align: center;
        margin-left: -1px;
        margin-top: -1px;
        cursor: pointer;
        width: 145px;
        align-items: center;
        i{
            color: #606266;
            font-size: 35px;
        }
        svg{
            color: #606266;
            font-size: 35px;
        }
        span{
            padding: 20px 10px 0px 10px;
            color: #666666;
            font-size: 12px;
        }

    }
    .item:hover{
        background-color: var(--myTheme);
        svg,span{
            color: #FFFFFF;
        }
    }
}




.updateLine{
    padding: 5px;
}


</style>
